{% extends 'base.html' %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{ url_for('static', filename='lib/bootstrap4-toggle.min.css') }}">

{% endblock %}

{% block content %}
<div class="container">
<h4>Services:</h4>
<!-- ######## Main Service ########-->
  <div id="main_service_space" class="form-group row">
    <div class="col">
    <label for="main-switch" class="col-4 col-form-label col-form-label-lg">Main service</label>
    <input id="main-switch" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="outline-secondary">
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#{{ main_settings[0].source_section }}" aria-expanded="false" aria-controls="main_service_options">Options</button>
    </div>
  </div>
      <form id="{{ main_settings.pop(0).source_section }}" class="collapse was-validated">

        <div class="form-group row">
        <label for="position" class="col-sm-3 col-form-label">Base coordinates: </label>
        <div class="col-sm-9">
            <input id="position" type="text" name="position" class="form-control" value="{{ main_settings[0].position }}" title="antenna coordinates: latitude longitude elevation" pattern="-?\d{1,3}\.\d+[\s]-?\d{1,3}\.\d+[\s][-+]?\d+\.\d+" required>
            <div class="invalid-feedback">Antenna's coordinates: latitude longitude elevation</div>
        </div>
    </div>
    <div class="form-group row">

        <label for="com_port" class="col-sm-3 col-form-label">Com port: </label>
        <div class="col-sm-9">
            <input id="com_port" type="text" name="com_port" class="form-control" value="{{ main_settings[1].com_port }}" title="Gnss receiver com port (without /dev/)" pattern="\w+[^|><\/\s]*" required>
            <div class="invalid-feedback">Gnss receiver com port (without /dev/)</div>
        </div>
    </div>
    <div class="form-group row">

        <label for="com_port_settings" class="col-sm-3 col-form-label">Com port settings: </label>
        <div class="col-sm-9">
            <input id="com_port_settings" type="text" name="com_port_settings" class="form-control" value="{{ main_settings[2].com_port_settings }}" title="Com port settings: baudrate:data bits:parity:stop bits:flow control" pattern="\w[^|><\/]*" required>
            <div class="invalid-feedback">Com port settings: baudrate:data bits:parity:stop bits:flow control</div>
        </div>
    </div>
    <div class="form-group row">

        <label for="receiver" class="col-sm-3 col-form-label">Receiver type: </label>
        <div class="col-sm-9">
            <input id="receiver" type="text" name="receiver" class="form-control" value="{{ main_settings[3].receiver }}" title="Gnss receiver Brand and model" pattern="\w[^|><\/\s]*" required >
            <div class="invalid-feedback">Gnss receiver brand and model</div>

        </div>
    </div>
    <div class="form-group row">

        <label for="receiver_format" class="col-sm-3 col-form-label">Receiver format: </label>
        <div class="col-sm-9">
            <input id="receiver_format" type="text" name="receiver_format" class="form-control" value="{{ main_settings[4].receiver_format }}" title="Gnss receiver format (ubx,sqt,tersus,...)" pattern="\w[^|><\/]*" required>
            <div class="invalid-feedback">Gnss receiver format (ubx,sqt,tersus,...)</div>

        </div>

    </div>
    <div class="form-group row">

        <label for="tcp_port" class="col-sm-3 col-form-label">Tcp port: </label>
        <div class="col-sm-9">
            <input id="tcp_port" type="text" name="tcp_port" class="form-control" value="{{ main_settings[5].tcp_port }}" title="local tcp port" pattern="[0-9]{4,5}" required>
            <div class="invalid-feedback">Local tcp port</div>

        </div>

    </div>
          <div class="clearfix">
            <button type="submit" class="btn btn-primary float-right" disabled>Save</button>
          </div>
      </form>

<!-- ######## Ntrip Service ########-->
  <div id="ntrip_service_space" class="form-group row">
    <div class="col">
    <label for="ntrip-switch" class="col-4 col-form-label col-form-label-lg">Ntrip service</label>
    <input id="ntrip-switch" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="outline-secondary">
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#{{ ntrip_settings[0].source_section }}" aria-expanded="false" aria-controls="ntrip_service_options">Options</button>
    </div>
  </div>
    <form id="{{ ntrip_settings.pop(0).source_section }}" class="collapse was-validated">
      <div class="form-group row">
        <label for="svr_addr" class="col-sm-3 col-form-label">Caster address: </label>
        <div class="col-sm-9">
            <input id="svr_addr" type="text" name="svr_addr" class="form-control" value="{{ ntrip_settings[0].svr_addr }}" title="caster url address" pattern="\w+[^|><\s]*" required>
            <div class="invalid-feedback">Caster url address</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="svr_port" class="col-sm-3 col-form-label">Caster port: </label>
        <div class="col-sm-9">
            <input id="svr_port" type="text" name="svr_port" class="form-control" value="{{ ntrip_settings[1].svr_port }}" title="caster port" pattern="[0-9]{4,5}" required>
            <div class="invalid-feedback">Caster port</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="svr_pwd" class="col-sm-3 col-form-label">Caster password: </label>
        <div class="col-sm-9">
            <input id="svr_pwd" type="password" name="svr_pwd" class="form-control" value="{{ ntrip_settings[2].svr_pwd }}" title="caster password" required>
            <div class="invalid-feedback">Caster password</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="mnt_name" class="col-sm-3 col-form-label">Mount name: </label>
        <div class="col-sm-9">
            <input id="mnt_name" type="text" name="mnt_name" class="form-control" value="{{ ntrip_settings[3].mnt_name }}" title="Mount name" pattern="\w+[^|><\/\s]*" required>
            <div class="invalid-feedback">Mount name</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="rtcm_msg" class="col-sm-3 col-form-label">Rtcm messages: </label>
        <div class="col-sm-9">
            <input id="rtcm_msg" type="text" name="rtcm_msg" class="form-control" value="{{ ntrip_settings[4].rtcm_msg }}" title="rtcm messages list" pattern="[0-9,().]+" required>
            <div class="invalid-feedback">Rtcm messages list</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="ntrip_receiver_options" class="col-sm-3 col-form-label">Receiver options: </label>
        <div class="col-sm-9">
            <input id="ntrip_receiver_options" type="text" name="ntrip_receiver_options" class="form-control" value="{{ ntrip_settings[5].ntrip_receiver_options }}" title="Receiver options" pattern="[^|><\/]*">
            <div class="invalid-feedback">Receiver dependent options</div>
        </div>
      </div>      

        <div class="clearfix">
          <button type="submit" class="btn btn-primary float-right" disabled>Save</button>
        </div>
    </form>

  <!-- ######## RTCM Service ########-->
  <div id="rtcm_svr_service_space" class="form-group row">
    <div class="col">
    <label for="rtcm_svr-switch" class="col-4 col-form-label col-form-label-lg">Rtcm server service</label>
    <input id="rtcm_svr-switch" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="outline-secondary">
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#{{ rtcm_svr_settings[0].source_section }}" aria-expanded="false" aria-controls="rtcm_svr_service_options">Options</button>
    </div>
  </div>
    <form id="{{ rtcm_svr_settings.pop(0).source_section }}" class="collapse was-validated">
      <div class="form-group row">
        <label for="rtcm_svr_port" class="col-sm-3 col-form-label">Rtcm server port: </label>
        <div class="col-sm-9">
            <input id="rtcm_svr_port" type="text" name="rtcm_svr_port" class="form-control" value="{{ rtcm_svr_settings[0].rtcm_svr_port }}" title="rtcm server port" pattern="[0-9]{4,5}" required>
            <div class="invalid-feedback">Rtcm server port</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="rtcm_svr_msg" class="col-sm-3 col-form-label">Rtcm server messages: </label>
        <div class="col-sm-9">
            <input id="rtcm_svr_msg" type="text" name="rtcm_svr_msg" class="form-control" value="{{ rtcm_svr_settings[1].rtcm_svr_msg }}" title="Rtcm server messages list" pattern="[0-9,().]+" required>
            <div class="invalid-feedback">Rtcm server messages list</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="rtcm_receiver_options" class="col-sm-3 col-form-label">Receiver options: </label>
        <div class="col-sm-9">
            <input id="rtcm_receiver_options" type="text" name="rtcm_receiver_options" class="form-control" value="{{ rtcm_svr_settings[2].rtcm_receiver_options }}" title="Receiver options" pattern="[^|><\/]*">
            <div class="invalid-feedback">Receiver dependent options</div>
        </div>
      </div>
        
        <div class="clearfix">
        <button type="submit" class="btn btn-primary float-right" disabled>Save</button>
      </div>
    </form>

  <!-- ######## File Service ########-->
  <div id="file_service_space" class="form-group row">
      <div class="col">
    <label for="file-switch" class="col-4 col-form-label col-form-label-lg">File service</label>
    <input id="file-switch" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="outline-secondary">
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#{{ file_settings[0].source_section }}" aria-expanded="false" aria-controls="file_service_options">Options</button>
  </div>
  </div>
    <form id="{{ file_settings.pop(0).source_section }}" class="collapse was-validated">
      <div class="form-group row">
        <label for="datadir" class="col-sm-3 col-form-label">Data directory: </label>
        <div class="col-sm-9">
            <input id="datadir" type="text" name="datadir" class="form-control" value="{{ file_settings[0].datadir }}" title="Path to data directory" pattern=".+[^|\s]" required>
            <div class="invalid-feedback">Path to data directory</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="file_name" class="col-sm-3 col-form-label">File name: </label>
        <div class="col-sm-9">
            <input id="file_name" type="text" name="file_name" class="form-control" value="{{ file_settings[1].file_name }}" title="File name construction" pattern="%Y-%m-%d_%h-%M-%S[^|><\s]*" required>
            <div class="invalid-feedback">File name construction (should start with %Y-%m-%d_%h-%M-%S)</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="file_rotate_time" class="col-sm-3 col-form-label">File rotation time: </label>
        <div class="col-sm-9">
            <input id="file_rotate_time" type="text" name="file_rotate_time" class="form-control" value="{{ file_settings[2].file_rotate_time }}" title="File rotation time (in hours)" pattern="\d+\.?\d*" required>
            <div class="invalid-feedback">File rotation time (in hour)</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="file_overlap_time" class="col-sm-3 col-form-label">File overlap time: </label>
        <div class="col-sm-9">
            <input id="file_overlap_time" type="text" name="file_overlap_time" class="form-control" value="{{ file_settings[3].file_overlap_time }}" title="File overlap time (in seconds)" pattern="\d+" required>
            <div class="invalid-feedback">File rotation time (in seconds)</div>
        </div>
      </div>
      <div class="form-group row">
        <label for="archive_rotate" class="col-sm-3 col-form-label">Archive duration: </label>
        <div class="col-sm-9">
            <input id="archive_rotate" type="text" name="archive_rotate" class="form-control" value="{{ file_settings[4].archive_rotate }}" title="Archive duration before deletion (in days)" pattern="\d+" required>
            <div class="invalid-feedback">Archive duration before deletion (in days)</div>
        </div>
      </div>
        <div class="clearfix">
          <button type="submit" class="btn btn-primary float-right" disabled>Save</button>
        </div>
    </form>
</div>
<div id="system_settings" class="container">
    <h4> System Settings:</h4>
    <div class="row py-2 align-items-center">
        <div class="col-sm-4">
            <span class="col-sm-3">Rtkbase {{ g.version }}</span>
        </div>
        <div class="col-sm-8">
            <button id="check_update_button" class="btn btn-secondary" type="button">Check update</button>
        </div>
    </div>

    <div class="row py-2">
      <div class="col-sm-4">
        <span class="col-sm-3">Change Password:</span>
      </div>
      <div class="col-sm-8"> 
        <form id="change_password">  
          <!--
          <div class="form-group row">
            <label for="cur_pwd" class="col-sm-3 col-form-label">Current: </label>
            <div class="col-sm-9">
                <input id="cur_pwd" type="password" name="cur_pwd" class="form-control" title="current password" required>
                <div class="invalid-feedback">Current password</div>
            </div>
          </div>
          -->      
          <div class="form-group row">
            <label for="new_password" class="col-sm-3 col-form-label">New: </label>
            <div class="col-sm-9">
                <input id="new_password" type="password" name="new_password" class="form-control" title="new password" required>
                <div class="invalid-feedback">New password</div>
            </div>
          </div>
          <div class="form-group row">
            <label for="confirm_password" class="col-sm-3 col-form-label">Confirm: </label>
            <div class="col-sm-9">
                <input id="confirm_password" type="password" name="confirm_password" class="form-control" title="confirm password" required>
                <div class="invalid-feedback">Confirm password</div>
            </div>
          </div>
          <div class="clearfix">
            <button type="submit" class="btn btn-primary float-right" disabled>Change password</button>
          </div>
        </form>
      </div>
    </div>
    
    <div class="row py-2 align-items-center">
      <div class="col-sm-4">
        <span class="col-sm-3">Diagnostic:</span>
      </div>
      <div class="col-sm-8">
          <a href="{{ url_for('diagnostic') }}" target="_blank" class="btn btn-secondary" role="button">View</a>
          <!--<button id="download-diag-button" class="btn btn-secondary" type="button" disabled>Download</button>-->
      </div>
  </div>

    <div class="row py-2 align-items-center">
      <div class="col-sm-4">
        <span class="col-sm-3">Power:</span>
      </div>
      <div class="col-sm-8">
          <button id="reboot-button" class="btn btn-secondary" type="button">Reboot</button>
          <button id="shutdown-button" class="btn btn-secondary" type="button">Shutdown</button>
      </div>
  </div>
    
</div>
<!-- The update  Modal dialog box-->
<div class="modal" id="updateModal">
    <div class="modal-dialog">
      <div class="modal-content">     
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Update</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>       
        <!-- Modal body -->
        <div class="modal-body">          
        </div>       
        <!-- Modal footer -->
        <div class="modal-footer mx-auto">
          <button id="start-update-button" type="button" class="btn btn-success" disabled>Update</button>
          <button id="cancel-button" type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>         
        </div>      
      </div>
    </div>
  </div>

  
  <!-- The Paswword is changed Modal dialog box-->
<div class="modal" id="passwordChangedModal">
  <div class="modal-dialog">
    <div class="modal-content">     
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Password Update</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>       
      <!-- Modal body -->
      <div class="modal-body text-center ">The password was updated successfuly
      </div>       
      <!-- Modal footer -->
      <div class="modal-footer mx-auto">
        <a href="{{ url_for('logout') }}" class="btn btn-success" role="button">Log out</a>
      </div>      
    </div>
  </div>
</div>
  <!-- The reboot  Modal dialog box-->
<div class="modal" id="rebootModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Reboot</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body text-center ">Reboot the device. Are you sure?          
      </div>
      <!-- Modal footer -->
      <div class="modal-footer mx-auto">
        <button id="confirm-reboot-button" type="button" class="btn btn-danger">Reboot</button>
        <button id="cancel-button" type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
      </div>     
    </div>
  </div>
</div>

<!-- The shutdown Modal dialog box-->
<div class="modal" id="shutdownModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Shutdown</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body text-center ">Shutdown the device. Are you sure?          
      </div>
      <!-- Modal footer -->
      <div class="modal-footer mx-auto">
        <button id="confirm-shutdown-button" type="button" class="btn btn-danger">Shutdown</button>
        <button id="cancel-button" type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
      </div>     
    </div>
  </div>
</div>


{% endblock %}


{% block scripts %}
{{super()}}
<script type="text/javascript" src="{{ url_for('static', filename='lib/bootstrap4-toggle.min.js') }}" charset="utf-8"></script>
<script type="text/javascript" src="{{ url_for('static', filename='settings.js') }}" charset="utf-8"></script>
{% endblock %}